<div class="card-body">
<div class="card-btns mb-2-5 row">
	<div class="col-md-6">
        <div class="input-group">
            <span class="input-group-btn"><button class="btn btn-default" type="button">附件类型</button></span>
            <select class="form-select" id="attach_type1">
                <option value="">请选择</option>
                <?php foreach ($attach_types as $param_k => $param_v): ?>
                    <option value="{:$param_v['id']}">{:$param_v['name']}</option>
                <?php endforeach ?>
            </select>
            <select class="form-select" id="attach_type2">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <div class="col-md-2">
    	<!-- <button class="btn btn-info" type="button"><i class="mdi mdi-content-save"></i> 上传附件</button> -->
    	<div class="js-upload-attach">
	        <div id="picker_attach" style="position:relative;">上传附件</div>
	    </div>
    </div>
</div>

<style type="text/css">
	.img-td {text-align: center;}
	.img-td img {height: 20px;cursor: pointer;}
</style>

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
      	<th></th>
        <th>附件名称</th>
        <th>附件类型</th>
        <th>文件类型</th>
        <th>上传人</th>
        <th>上传时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="attach_tbody">
        <?php foreach ($attachs as $k => $vo): ?>
        	<tr>
        			<td class="img-td">
		      			<?php if (in_array($vo['extension'],['pdf','doc','docx','xls','xlsx','txt'])): ?>
		      				<img src="__STATIC__/common/common_file.jpg" alt="{:$vo['type']}" class="gallery-grid">	
		      			<?php else: ?>
		      				<img src="__UPLOAD__/{:$vo['savename']}" alt="{:$vo['type']}" class="gallery-grid">
		      			<?php endif ?>
		      		</td>
              <td>{:$vo['name']}</td>
              <td>{:$vo['type']}</td>
              <td>{:$vo['extension']}</td>
              <td>{:$vo['admin']['truename']}</td>
              <td>{:timeDef($vo['ctime'])}</td>
              <td>
              	<div class="btn-group btn-group-sm">
		              <a class="btn btn-default" target="_blank" href="__UPLOAD__/{:$vo['savename']}" download="{:$vo['name']}" title="下载"><i class="mdi mdi-download"></i></a>
		              <a class="btn btn-default" href="javascript:void(0)" data-id='{:$vo["id"]}' onclick="deleteAttach(this)" title="删除"><i class="mdi mdi-delete"></i></a>
              </div></td>
            </tr>
        <?php endforeach ?>
    </tbody>
  </table>
</div>
</div>

<!-- 图片浏览器 -->
<link rel="stylesheet" href="__STATIC__/common/viewer/css/viewer.min.css" />
<script src="__STATIC__/common/viewer/js/viewer-jquery.min.js"></script>
<script type="text/javascript">
  $('.gallery-grid').viewer({
    tooltip:false,
  });
</script>

<script type="text/javascript">
	$("#attach_type1").on('change',function(){
		$.ajax({
	        url:'{:url("attach/indexForAjax")}',
	        data:{pid:$(this).val(),group:3},
	        type:'post',
	        dataType:'json',
	        success:function(data){
	            var str = '<option value="">请选择</option>';
		        for (var i in data){
		          str += '<option value="'+data[i]['name']+'">'+data[i]['name']+'</option>'
		        }
		        $("#attach_type2").html(str);
	        }
	    });
	 });

	$(document).ready(function(){
	    // 图片上传(单张图片，多张图片)
	    $('.js-upload-attach').each(function() {
	    	var $upload_id = $(this).find('div').attr('id');
	        var $input_file      = $(this).find('input'),
	            $multiple        = false;  // 是否选择多个文件

	        var uploader = WebUploader.create({
	            auto: true,
	            duplicate: true,
	            resize: false,
	            swf: static_path + '/admin/js/webuploader/Uploader.swf',
	            server: '/index.php/admin/base/upload',
	            pick: {
	                id: '#' + $upload_id,
	                multiple: $multiple
	            },
	            accept: {
	              
	            }
	        });
	      
	        uploader.on('uploadSuccess', function(file, response) {
	            if (response.code == '2000') {
	            	var attch_type = $("#attach_type2").val();
	            	if ( (attch_type == null || attch_type == '') && $("#attach_type1").val() > 0 ) {
	            		var attch_type = $("#attach_type1").find('option:selected').text();
	            	}
	            	var upload_params = { order_id:'{:$order['id']}',
	            	name:response['filename'],
	            	savename:response['savename'],
	            	type:attch_type,
	            	extension:response['extension'] }
	            	$.ajax({
				        url:'{:url('uploadAttach')}',
				        data:upload_params,
				        type:'post',
				        dataType:'json',
				        success:function(data){
				        	console.log(data)
				        	data = data.data;
				        	var imgurl = upload_path+'/'+data.savename;
				        	if (['pdf','doc','docx','xls','xlsx','txt'].indexOf(data.extension) > -1) {
                      imgurl = static_path+'/common/common_file.jpg';
                  }
	                var str = '<tr>'+
	                	'<td class="img-td"><img src="'+imgurl+'" alt="{:$vo['type']}" class="gallery-grid">	</td>'+
			              '<td>'+data.name+'</td>'+
			              '<td>'+data.type+'</td>'+
			              '<td>'+data.extension+'</td>'+
			              '<td>'+data.admin_name+'</td>'+
			              '<td>'+data.ctime+'</td>'+
			              '<td><div class="btn-group btn-group-sm">'+
			              '<a class="btn btn-default" target="_blank" href="'+(upload_path+'/'+data.savename)+'" download="'+data.name+'" title="下载"><i class="mdi mdi-download"></i></a>'+
			              '<a class="btn btn-default" href="javascript:void(0)" data-id="'+data.id+'" onclick="deleteAttach(this)" title="删除"><i class="mdi mdi-delete"></i></a>'+
			              '</div></td>'+
			            '</tr>';
					        $("#attach_tbody").append(str);

					        $('.gallery-grid').viewer({
								    tooltip:false,
								  });
				        }
				    });
	            }
	        });
	        uploader.on('uploadError', function(file) {
		        	cchUtil.message('上传失败','danger');
	        });
	        uploader.on('error', function(type) {
	            switch (type) {
		            case 'Q_TYPE_DENIED':
		                cchUtil.message('文件类型不正确','danger');
		                break;
		            case 'F_EXCEED_SIZE':
		                cchUtil.message('文件大小不正确','danger');
		                break;
	            }
	        });

	        // 接入图片查看插件
	        // $(this).magnificPopup({
	        //     delegate: 'a.btn-link-pic',
	        //     type: 'image',
	        //     gallery: {
	        //         enabled: true
	        //     }
	        // });
	    });
	  
	    // 图片展示
	    // jQuery('.js-gallery').each(function() {
	    //   jQuery(this).magnificPopup({
	    //     delegate: 'a.img-link',
	    //     type: 'image',
	    //     gallery: {
	    //       enabled: true
	    //     }
	    //   });
	    // });
	});

	function deleteAttach(obj){
		$.ajax({
	        url:'{:url('deleteAttach')}',
	        data:{attach_id:$(obj).attr('data-id')},
	        type:'post',
	        dataType:'json',
	        success:function(data){
	            $(obj).parent().parent().parent().remove();
	        }
	    });
		
	}
</script>